<template>
  <div>
    <el-card shadow="never" class="!border-none">
      <template #header>
        <span class="font-extrabold text-lg">充值设置</span>
      </template>
      <el-form :model="formData" label-width="120px">
        <el-form-item label="状态">
          <div>
            <el-radio-group v-model="formData.status" class="ml-4">
              <el-radio :label="1">开启</el-radio>
              <el-radio :label="0">关闭</el-radio>
            </el-radio-group>
            <div class="form-tips">
              关闭或开启充值功能，关闭后将不显示充值入口
            </div>
          </div>
        </el-form-item>
        <el-form-item label="最低充值金额">
          <div>
            <el-input
              v-model="formData.min_amount"
              placeholder="请输入最低充值金额"
              clearable
            />
            <div class="form-tips">
              最低充值金额要求，不填或填0表示不限制最低充值金额
            </div>
          </div>
        </el-form-item>
      </el-form>
    </el-card>
    <footer-btns v-perms="['recharge.recharge/setConfig']">
      <el-button type="primary" @click="handleSubmit">保存</el-button>
    </footer-btns>
  </div>
</template>
<script lang="ts" setup>
import { getRechargeConfig, setRechargeConfig } from "@/api/app/recharge";
const formData = reactive({
  status: 1, //功能状态 1-开启 0-关闭
  min_amount: "", //最低充值金额
});

const getConfig = async () => {
  const data = await getRechargeConfig();
  Object.assign(formData, data);
};
const handleSubmit = async () => {
  await setRechargeConfig(formData);
  getConfig();
};
getConfig();
</script>
